<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-13 10:45:04
 * @LastEditTime: 2023-12-15 16:15:24
-->
<template>
    <div class="trans">
        <div class="trans1">
            <div class="trans2" @click="this.$router.push('/storeFees')">
                <img src="../../assets/images/h62.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l36') }}</div>
            </div>
            <div class="trans2" @click="this.$router.push('/employeeRewards')">
                <img src="../../assets/images/h63.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l37') }}</div>
            </div>
            <div class="trans2" @click="this.$router.push('/payrollManage')">
                <img src="../../assets/images/h64.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l38') }}</div>
            </div>
        </div>
        <div class="trans1">
            <div class="trans2" @click="this.$router.push('/financialStatements')">
                <img src="../../assets/images/h65.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l39') }}</div>
            </div>
            <div class="trans2" @click="this.$router.push('/salaryConfiguration')">
                <img src="../../assets/images/h66.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l40') }}</div>
            </div>
            <div class="trans2" @click="this.$router.push('/commissionPlan')">
                <img src="../../assets/images/h67.svg" alt="" class="trans3">
                <div class="trans4"> {{ $t('text.router.l41') }}</div>
            </div>
        </div>

        <div class="trans5">
            <div class="trans6">
                <div class="trans7">
                    <RadioSelect :selectList="orgTreeList" searchKey="orgIds" isShowTitle @returnData="setData" isRange2>
                    </RadioSelect>
                </div>
                <div class="trans8">{{ $t('text.Contract.l357') }}:&ensp;</div>
            </div>
            <div class="trans9">
                <div class="trans10">
                    <div class="trans11">
                        <div class="trans1222"> {{ $t('text.router.l36') }}</div>
                        <div class="trans13"></div>
                        <div class="trans13">{{contractData.org.countPrice}}</div>
                    </div>
                    <div class="trans14">
                        <div class="trans15">
                            <div class="trans16">{{contractData.org.examineCount}}</div>
                            <div class="trans17">{{ $t('text.Contract.l358') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">+{{contractData.org.obtainPrice}}</div>
                            <div class="trans17">{{ $t('text.Contract.l359') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{contractData.org.losePrice}}</div>
                            <div class="trans17">{{ $t('text.Contract.l360') }}</div>
                        </div>
                    </div>
                </div>

                <div class="trans10">
                    <div class="trans11">
                        <div class="trans1222">{{ $t('text.router.l37') }}</div>
                        <div class="trans13"></div>
                        <div class="trans13">{{contractData.user.countPrice}}</div>
                    </div>
                    <div class="trans14">
                        <div class="trans15">
                            <div class="trans16">{{contractData.user.examineCount}}</div>
                            <div class="trans17">{{ $t('text.Contract.l361') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">+{{contractData.user.obtainPrice}}</div>
                            <div class="trans17">{{ $t('text.Contract.l362') }}</div>
                        </div>
                        <div class="trans15">
                            <div class="trans16">{{contractData.user.losePrice}}</div>
                            <div class="trans17">{{ $t('text.Contract.l363') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import RadioSelect from "@/components/select/RadioSelect.vue"
import { financeCount, orgTreeNoUser } from "../../http/api"

export default {
    name: "FinancialManage",
    components: { RadioSelect },
    data() {
        return {
            contractData: {org:{},user:{}},
            orgTreeList: [],
            searchData:{}
        }
    },
    mounted() {
        financeCount({orgIds:""}).then(res => {
            if (res !== undefined) {
                this.contractData = res
                console.log(res)
                orgTreeNoUser().then(res => {
                    if (res !== undefined) {
                        this.orgTreeList = res
                    }
                }).catch()
            }
        })

    },
    methods: {
        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
            financeCount(this.searchData).then(res => {
                if (res !== undefined) {
                    this.contractData = res.dataList
                }
            })
        }
    },
    watch: {},
    computed: {},
}
</script>
    
<style scoped>
.trans {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8fa;
}

.trans1 {
    display: flex;
    margin-top: 50px;
    width: 80%;
}

.trans2 {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    padding: 20px;
    margin-right: 20px;
    box-shadow: 0px 3px 5px 2px #e9e9e9;
}

.trans2:last-child {
    margin: 0;
}

.trans3 {
    width: 40px;
    height: 40px;
}

.trans4 {
    font-weight: 600;
    font-size: 15px;
    padding-left: 10px;
    white-space: nowrap;
}

.trans5 {
    background: white;
    white-space: nowrap;
    width: 80%;
    margin-top: 40px;
    box-shadow: 0px 3px 5px 2px #e9e9e9;
}

.trans6 {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}

.trans7 {
    font-size: 13px;
}

.trans8 {
    font-size: 13px;
}

.trans9 {
    display: flex;
    padding: 30px 20px;
    font-weight: 600;
    font-size: 15px;
}

.trans10 {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-right: 20px;
    padding-left: 20px;
    border-right: 2px solid #eee;
}

.trans10:first-child {
    padding-left: 0px;
}

.trans10:last-child {
    padding-right: 0px;
    border: none;
}

.trans11 {
    display: flex;
    padding-bottom: 20px;
}

.trans12 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans12::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #1b4fd9;
    margin-right: 5px;
}

.trans122 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans122::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #fa5300;
    margin-right: 5px;
}

.trans1222 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trans1222::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #02cc85;
    margin-right: 5px;
}

.trans13 {
    flex: 1;
    color: #f76c74;
}

.trans14 {
    display: flex;
}

.trans15 {
    flex: 1;
}

.trans16 {
    font-size: 13px;
}

.trans17 {
    font-weight: 500;
    padding-top: 5px;
}</style>